<template>
    <view class="container">
        <!--  带搜索的标题栏  -->
        <view class="back-layout hor-layout">
            <view class="back-view" @click="navBack">
                <i class="iconfont back-icon">&#xe8de;</i>
            </view>
            <u-search margin="8px" placeholder="请输入教师姓名" v-model="search" :action-style="searchStyle"
                      @search="refreshData" @custom="refreshData" @clear="refreshData"></u-search>
        </view>
        <u-tabs-swiper class="swiper-tabs" ref="uTabs" :list="tabList" :current="current" :is-scroll="false"
                       active-color="#42B4AB" @change="tabsChange"></u-tabs-swiper>
        <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
            <swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
                <scroll-view class="swiper-item-list" scroll-y @scrolltolower="onScrollBottom">
                    <view v-if="teacherList.length<=0" class="list-no-data">
                        暂无数据
                    </view>
                    <view v-for="(item,index) in teacherList" v-else :key="index" class="teacher-item hor-layout-center"
                          @click="toTeacherInfo(item)">
                        <image class="teacher-icon" :src="item.avatar?item.avatar:ic_teacher_man_default"/>
                        <view>{{ item.name }}</view>
                    </view>
                    <u-loadmore margin-top="15" v-if="loadingObj.status" :status="loadingObj.status"/>
                    <view style="height: 20px"></view>
                </scroll-view>
            </swiper-item>
        </swiper>
        <!-- 添加按钮   -->
        <view class="add-student-btn" v-if="showAddBtn" @click="toAddTeacherPage">
            <i class="iconfont add-student-icon">&#xe601;</i>
        </view>
    </view>
</template>

<script>
import {addTeacher, teacherInfo, clockIn, recordCourse, teacherInfoSchedule} from "@/router.js"
import {TeacherListApi} from "@/api/teacherManage.js"

let ic_teacher_man_default = require("@/static/home/ic_teacher_man_default.png")
let engine = new TeacherListApi()
export default {
  name: "teacher",
  data() {
    return {
      ic_teacher_man_default,
      flag: '',
      searchStyle: {
        color: 'white',
        width: '60px',
        height: '28px',
        lineHeight: '28px',
        borderRadius: '14px',
        background: '#ff9900',
      },
      tabList: [{name: "全部"}, {name: "钢琴"},],
      teacherList: [{}, {}],
      current: 0,
      swiperCurrent: 0,
      search: '',
      loadingObj: {
        status: '',
        current: 1,
        total: ''
      },
    }
  },
  computed: {
    filterTeachers() {
      let tName = this.search
      if (tName) return this.teacherList.filter(tea => tea.name.indexOf(tName) !== -1)
      return this.teacherList
    },
    showAddBtn() {
      return this.flag === '教师管理'
    }
  },
  watch: {
    swiperCurrent(val, oldVal) {
      this.refreshData()
    }
  },
  onLoad(options) {
    this.flag = options.text
    this.getMajorList()
  },
  methods: {
    getMajorList() {
      engine.getMajorList().then(res => {
        let tabList = res.data
        tabList.unshift({id: '', name: '全部'})
        this.tabList = tabList
        this.refreshData()
      })
    },
    getTeacherList() {
      let major = this.tabList.find((item, index) => {
        return index === this.swiperCurrent
      }).id || ''
      let search = this.search,
          page = this.loadingObj.current
      engine.getTeacherList({search, major, page}).then(res => {
        this.teacherList = this.teacherList.concat(res.data)
        this.loadFinish(res.total)
      })
    },
    refreshData() {
      this.loadingObj.current = 1
      this.loadingObj.status = ''
      this.teacherList = []
      this.getTeacherList()
    },
    loadMore() {
      if (this.loadingObj.current >= this.loadingObj.total) {
        this.loadingObj.status = 'nomore'
      } else {
        this.loadingObj.status = 'loading'
        this.loadingObj.current = this.loadingObj.current + 1
        this.getTeacherList()
      }
    },
    loadFinish(total) {
      this.loadingObj.total = Math.ceil(total / 10)
      this.loadingObj.status = ''
      if (this.loadingObj.current >= this.loadingObj.total
          && this.teacherList.length > 0) {
        this.loadingObj.status = 'nomore'
      }
    },
    navBack() {
      this.$u.route({type: 'back'})
    },
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      console.log("transition", e)
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      console.log("animationfinish", e)
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    onScrollBottom(e) {
      console.log("onScrollBottom", e)
      this.loadMore()
    },
    toTeacherInfo(item) {
      let url = teacherInfo
      if (this.flag === '考勤中心') url = clockIn
      if (this.flag === '录播课程') url = recordCourse
      if (this.flag === '教师课表') url = teacherInfoSchedule
      this.$u.route({url, params: item})
    },
    toAddTeacherPage() {
      this.$u.route({url: addTeacher})
    }
  }
}
</script>

<style>
    page {
        background: #F2F2F2;
    }

    .back-layout {
        position: fixed;
        width: 100%;
        padding-top: var(--status-bar-height);
        height: calc(var(--status-bar-height) + 44px);
        line-height: 44px;
        font-size: 16px;
        background: #42B4AC;
    }

    .back-view {
        padding-left: 9px;
        padding-right: 9px;
    }

    .back-icon {
        color: white;
        font-size: 22px;
    }

    .container {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
    }

    .swiper-tabs {
        margin-top: calc(44px + var(--status-bar-height));
        border-bottom: 1px solid #F2F2F2;
    }

    .swiper-box {
        flex: 1;
    }

    .swiper-item {
        height: 100%;
    }

    .teacher-item {
        padding: 12px;
        margin: 0px 12px;
        margin-top: 18px;
        background: #FFFFFF;
        border-radius: 5px;
    }

    .teacher-icon {
        width: 38px;
        height: 38px;
        margin-right: 6px;
        border-radius: 3px;
    }

    .swiper-item-list {
        height: 100%;
        width: 100%;
    }

    .add-student-btn {
        position: fixed;
        bottom: 33px;
        right: 13px;
        width: 58px;
        height: 58px;
        line-height: 58px;
        text-align: center;
        background: #6079F5;
        border-radius: 50%;
    }

    .add-student-icon {
        color: white;
        font-size: 30px;
    }

    .list-no-data {
        width: 100%;
        height: 300px;
        text-align: center;
        line-height: 300px;
    }
</style>
